<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /*
        MVC 
          M - Model（数据层）
          V - View（视图层）
          C - Controller（控制层）

        单向数据流：数据由Model经过Controller处理流向View

        MVVM
          M - Model（数据层） -> Vue中的数据（例如：data 数据）
          V - View（视图层） -> Vue中模板（HTML）
          VM - ViewModel（视图模型层） -> vm（new Vue出来的实例对象）

        双向数据流：
          数据由Model经过ViewModel处理流向View -> data数据经过vm处理，给模板中某个元素设置textContent
          数据由View经过ViewModel处理流向Model -> 给模板中某个元素绑定input事件，当用户输入内容触发事件回调，在事件回调函数中就会修改data数据的值
      */
    </script>
  </body>
</html>
